<template>
    <div class="p-grid crud-demo">
        <div class="p-col-12">

            <!--面包屑-->
            <div  style="padding-bottom: 0.95rem;">
                <Breadcrumb :home="home" :model="crumbs"/>
            </div>

            <!--标签栏-->
            <div class="card">
                <h4>操作日志</h4>
                <p>账户下所有的行为操作日志。</p>

                <!--标签栏--选项卡-->
                <TabMenu :model="tabmenuItems" />
                <router-view />

                <!--标签栏--按钮组-->
                <Toast/>
                <Toolbar class="p-mb-12">
                    <template slot="left">
                        <Button type="button" icon="pi pi-refresh" class="p-mr-2 p-button-help" @click="refreshTab" />
                        <Button label="删除" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedlists || !selectedlists.length"/>
<!--                        <Button label="高级搜索" :icon="advSearchIcon"  class="p-button-link" @click="visibleRight = true" />-->
                    </template>

                    <template slot="right">
                         <span class="p-input-icon-left">
                                <i class="pi pi-search"/>
                                <InputText v-model="search" id="search_input" placeholder="检索..."/>
                            </span>&nbsp;
<!--                        <Button label="导出" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"/>-->
                    </template>
                </Toolbar>

                <!--标签栏--表格-->
                <DataTable ref="dt" :value="lists" :loading="loading"
                           :selection.sync="selectedlists"
                           :dataKey="dataKey" :rowHover="true"
                           paginatorTemplate=""
                           :scrollable="scrollable" :lazy="true"
                           sortMode="multiple" removableSort  @sort="updateSort($event)"
                           class="p-datatable-customers p-datatable-sm p-datatable-gridlines p-datatable-responsive-demo">

                    <template #loading>
                        <ProgressBar mode="indeterminate"/>
                        <div style="text-align: center">正在努力加载数据，请稍候...</div>
                    </template>
                    <template #empty>
                        <div style="text-align: center">{{empty}}</div>
                    </template>
                    <Column selectionMode="multiple" headerStyle="width: 3rem"  headerClass="p-text-center" bodyClass="p-text-center"></Column>
                    <Column field="id" header="ID"  headerStyle="width: 4rem" headerClass="p-text-center" bodyClass="p-text-center" sortable>
                        <template #body="slotProps">
                            <span style="word-wrap:break-word;word-break:break-all;">{{slotProps.data.id}}</span>
                        </template>
                    </Column>

                    <Column field="uri" header="请求路径" headerStyle="width: 8rem"  headerClass="p-text-center" bodyClass="p-text-center">
                        <template #body="slotProps">
                            <span style="word-wrap:break-word;word-break:break-all;">{{slotProps.data.uri}}</span>
                        </template>
                    </Column>
                    <Column field="arguments" header="请求参数" headerStyle="width: 8rem"  headerClass="p-text-center" bodyClass="p-text-center">
                        <template #body="slotProps">
                            <span  style="word-wrap:break-word;word-break:break-all;">{{slotProps.data.arguments}}</span>
                        </template>
                    </Column>

                    <Column field="method" header="请求类型" headerStyle="width: 8rem"  headerClass="p-text-center" bodyClass="p-text-center">
                        <template #body="slotProps">
                            <span class="list-badge status-success" style="word-wrap:break-word;word-break:break-all;">{{slotProps.data.method}}</span>
                        </template>
                    </Column>

                    <Column field="real_ip" header="IP" headerStyle="width: 8rem"  headerClass="p-text-center" bodyClass="p-text-center">
                        <template #body="slotProps">
                            <span class="" style="word-wrap:break-word;word-break:break-all;">{{slotProps.data.real_ip}}</span>
                        </template>
                    </Column>
                    <Column field="city_id" header="IP地区标识" headerStyle="width: 8rem"  headerClass="p-text-center" bodyClass="p-text-center">
                        <template #body="slotProps">
                            <span class="list-badge status-success" style="word-wrap:break-word;word-break:break-all;">{{slotProps.data.city_id}}</span>
                        </template>
                    </Column>


                    <Column field="code" header="状态码" headerStyle="width: 8rem"  headerClass="p-text-center" bodyClass="p-text-center">
                        <template #body="slotProps">
                            <span class="list-badge status-success" style="word-wrap:break-word;word-break:break-all;">{{slotProps.data.code}}</span>
                        </template>
                    </Column>
                    <Column field="msg" header="消息标识" headerStyle="width: 8rem"  headerClass="p-text-center" bodyClass="p-text-center">
                        <template #body="slotProps">
                            <span class="list-badge status-success" style="word-wrap:break-word;word-break:break-all;">{{slotProps.data.msg}}</span>
                        </template>
                    </Column>

                    <Column field="execution_time" header="执行时间(s)" headerStyle="width: 8rem"  headerClass="p-text-center" bodyClass="p-text-center">
                        <template #body="slotProps">
                            <span class="list-badge status-success" style="word-wrap:break-word;word-break:break-all;">{{slotProps.data.execution_time}}</span>
                        </template>
                    </Column>

                    <Column field="device" header="设备" headerStyle="width: 8rem"  headerClass="p-text-center" bodyClass="p-text-center">
                        <template #body="slotProps">
                            <span  style="word-wrap:break-word;word-break:break-all;">{{slotProps.data.device}}</span>
                        </template>
                    </Column>

                    <Column field="created_at" header="访问时间" headerStyle="width: 8rem"  sortable headerClass="p-text-center" bodyClass="p-text-center">
                        <template #body="slotProps">
                            {{slotProps.data.created_at}}
                        </template>
                    </Column>

                    <Column headerStyle="width: 16em" headerClass="p-text-center" bodyClass="p-text-center">
                        <template #header>
                            <Button type="button" icon="pi pi-cog" label="操作"></Button>
                        </template>
                        <template #body="slotProps">
                            <span class="p-buttonset">
                             <Button icon="pi pi-globe" label="查看详情" class="p-button-info" @click="editlist(slotProps.data)"/>
                            <Button icon="pi pi-trash" label="删除" class="p-button-danger"
                                    @click="confirmDeletelist(slotProps.data)"/>
                            </span>
                        </template>
                    </Column>

                </DataTable>

                <!--分页-->
                <Paginator slot="left" :first="offset" :rows="limit" :rowsPerPageOptions="[10,20,50,100]"
                           :totalRecords="totalItemsCount" @page="onPage($event)">
                    <template #right="slotProps">
                        显示第 {{slotProps.state.first+1}} 到第 {{(slotProps.state.first+slotProps.state.rows) &lt; totalItemsCount ? (slotProps.state.first+slotProps.state.rows) : totalItemsCount}} 条记录，总共 {{totalItemsCount}} 条记录
                        <Button type="button" icon="pi pi-refresh" @click="refreshTab" />
                    </template>
                </Paginator>

                <Dialog :visible.sync="deletelistDialog" :style="{width: '450px'}" header="确认" :modal="true">
                    <div class="confirmation-content">
                        <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"/>
                        <span v-if="list">确认删除 <b>{{list.name}}</b>?</span>
                    </div>
                    <template #footer>
                        <Button label="否" icon="pi pi-times" class="p-button-text"
                                @click="deletelistDialog = false"/>
                        <Button label="是" icon="pi pi-check" class="p-button-text" @click="deletelist"/>
                    </template>
                </Dialog>

                <Dialog :visible.sync="deletelistsDialog" :style="{width: '450px'}" header="确认" :modal="true">
                    <div class="confirmation-content">
                        <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"/>
                        <span v-if="list">确认删除所选项吗?</span>
                    </div>
                    <template #footer>
                        <Button label="否" icon="pi pi-times" class="p-button-text"
                                @click="deletelistsDialog = false"/>
                        <Button label="是" icon="pi pi-check" class="p-button-text" @click="deleteSelectedlists"/>
                    </template>
                </Dialog>

                <Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right" style="width: 32%;min-width: 20rem">
                    <h4 style="fontWeight:normal">高级搜索</h4>
                    <div class="p-col-12">

                        <div class="p-field p-fluid">
                            <span class="p-float-label">
                                <InputText id="username" type="text" v-model="advSearchs.username" op="LIKE"/>
                                <label for="username">用户名</label>
                            </span>
                        </div>

                        <h5>手机号</h5>
                        <div class="p-field p-fluid">
                            <label for="mobile">手机号</label>
                            <InputText id="mobile" type="text" v-model="advSearchs.mobile"/>
                            <small>输入您的手机号。</small>
                        </div>

                        <div class="p-field p-fluid">
                            <label for="created_at">时间范围</label>
                            <Calendar op="BETWEEN" id="created_at" v-model="advSearchs.created_at" :locale="zh" :showIcon="true" selectionMode="range" :showButtonBar="true"  :manualInput="true" dateFormat="yy-mm-dd" />
                            <small>输入您的时间范围。</small>
                        </div>

                        <Button type="button" @click="clickSearch()" label="提交" style="margin-right:.25em"/>
                        <Button type="button" @click="clearSearch()" label="重置" class="p-button-secondary"/>
                    </div>
                </Sidebar>

            </div>
        </div>
    </div>


</template>

<script>
    import TableService from '@/api/TableService';

    export default {
        data() {
            return {
                screenWidth: document.body.clientWidth, // 屏幕宽度
                scrollable:false,  //列表是否可滚动，屏幕宽度低于960时启用移动端预览模式，切换为：fasle
                //时间选择器
                dates2: null,
                zh: {
                    firstDayOfWeek: 0,
                    dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                    dayNamesShort: ["日", "一", "二", "三", "四", "五", "六"],
                    dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
                    monthNames: [ "一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月" ],
                    monthNamesShort: [ "一", "二", "三", "四", "五", "六","七", "八", "九", "十", "十一", "十二" ],
                    today: '今天',
                    clear: '清空',
                    dateFormat: 'mm-dd-yy',
                    weekHeader: '周'
                },
                minDate: null,
                maxDate: null,
                invalidDates: null,

                lists: null,
                empty: '没有找到匹配的记录',
                listDialog: false,
                deletelistDialog: false,
                deletelistsDialog: false,
                submitted: false,
                list: {},
                selectedlists: null,
                oldsearch : '',
                search: '', //快捷搜索--字段
                filter: {},//高级搜索--字段
                op: {},//高级搜索--条件
                loading: false,
                limit: 10, //分页，每页数量
                offset: 0, //从第几行开始
                totalItemsCount: 0,  //共多少条数据
                sort: 'id',  //排序键名
                order: 'desc',  //排序方式
                dataKey: 'id',//唯一字段，（主键）

                advSearchIcon : '',  //高级搜索选中时的icon
                visibleRight: false,  //弹出高级搜索选项
                advSearchs : {  //高级搜索字段
                    username : '',
                    mobile: '',
                    created_at: null,
                },
                controlRout:'/logs', //控制器
                home: {label: '控制台', icon: 'pi pi-home', to: '/'}, //面包屑公共导航
                crumbs: [ //面包屑
                ],

                tabmenuItems: [ //选项卡
                    {
                        label: '全部', icon: 'pi pi-fw pi-home', class: 'p-highlight',
                        command: (event) => {
                            this.setTabChecked(event);
                            this.clearFilter();
                            this.getListsTable();
                        }
                    }
                ],
            }
        },
        TableService: null,
        created() {
            //时间选择器初始化
            let today = new Date();
            let month = today.getMonth();
            let year = today.getFullYear();
            let prevMonth = (month === 0) ? 11 : month -1;
            let prevYear = (prevMonth === 11) ? year - 1 : year;
            let nextMonth = (month === 11) ? 0 : month + 1;
            let nextYear = (nextMonth === 0) ? year + 1 : year;
            this.minDate = new Date();
            this.minDate.setMonth(prevMonth);
            this.minDate.setFullYear(prevYear);
            this.maxDate = new Date();
            this.maxDate.setMonth(nextMonth);
            this.maxDate.setFullYear(nextYear);

            let invalidDate = new Date();
            invalidDate.setDate(today.getDate() - 1);
            this.invalidDates = [today,invalidDate];
            this.scrollable = document.body.clientWidth > 960;
            this.TableService = new TableService();

            //获取当前路由名称
            for (let i = 0; i < this.$router.options.routes[1].children.length ; i++){
                if(this.$router.options.routes[1].children[i].path === this.$route.fullPath){
                    this.crumbs = [
                        {label: '基础管理', },
                        {label: this.$router.options.routes[1].children[i].meta.title},
                    ];
                }
            }
        },
        mounted() {
            this.getListsTable();
            // 监听窗口大小
            window.onresize = () => {
                return (() => {
                    this.screenWidth = document.body.clientWidth
                })()
            };

        },
        methods: {
            updateSort(event)   //排序
            {
                if(event.multiSortMeta.length === 0) {
                    this.sort = this.dataKey;  //排序键名
                    this.order = 'desc';  //排序方式
                }else{
                    this.sort = event.multiSortMeta[0].field;  //排序键名
                    this.order = event.multiSortMeta[0].order===1 ? 'desc' : 'asc';  //排序方式
                }
                this.getListsTable();
            },
            refreshTab()  //刷新表格
            {
                this.getListsTable();
            },
            getListsTable(operation = null)  //获取表格数据
            {
                this.empty = '没有找到匹配的记录';
                let params = {
                    search: this.search,
                    filter: this.filter,
                    op: this.op,
                    limit: this.limit,
                    offset: this.offset,
                    sort: this.sort,
                    order: this.order,
                };
                this.loading = true;
                this.lists = null;
                this.totalItemsCount = 0;
                this.TableService.get(this.controlRout + '/list', params).then(data => {
                    // console.log('data:'+JSON.stringify(data));
                    if(data === undefined) {
                        this.empty = 'ERROR: 结果返回异常';
                        this.loading = false;
                        return;
                    }else if(typeof(data) === 'object' && data.code !== 20000){
                        this.empty = 'ERROR: '+data.msg;
                        this.loading = false;
                        return;
                    }
                    this.lists = data.data.rows;
                    this.totalItemsCount = data.data.total;
                    this.loading = false;

                    try {
                        if(operation.search || this.oldsearch) {
                            setTimeout(function () {
                                document.getElementById('search_input').focus();
                            }, 10);
                        }
                    }catch (e) {
                        // console.log('e:'+e.message); //隐藏undefined
                    }
                });
            },
            clickSearch()   //高级搜索
            {
                let icon = false;
                for(let name in this.advSearchs){
                    let value = '';
                    let op = document.getElementById(name).getAttribute("op");
                    op = (op === null || op === '') ? '=' : op;
                    console.log('op:' + op);
                    console.log(name + '---' + this.advSearchs[name]);
                    if(op === 'BETWEEN'){
                        value = this.formatDate(this.advSearchs[name]);
                    }else {
                        value = this.advSearchs[name].replace(/^\s+|\s+$/g, "");
                    }

                    if (value === '') {
                        continue;
                    }
                    this.setFilter(name, value, op);
                    icon = true;
                }

                this.visibleRight = false;
                if(icon) {
                    this.advSearchIcon = 'pi pi-circle-on';
                }
                this.getListsTable();
            },
            clearSearch()  //重置搜索框
            {
                this.advSearchIcon = '';
                for(let name in this.advSearchs){
                    if(this.advSearchs[name] === null || this.advSearchs[name].length !== 0){
                        this.advSearchs[name] = '';
                        this.setFilter(name, "");
                    }
                }
                this.getListsTable();
            },
            setFilter(name, value, symbol = "=")  //设置查询条件
            {
                if(value === ""){
                    delete this.filter[name];
                    delete this.op[name];
                    return;
                }
                name = name.replace(/^\s+|\s+$/g,"");
                value = value.replace(/^\s+|\s+$/g,"");
                symbol = symbol.replace(/^\s+|\s+$/g,"");
                this.filter[name] = value;
                this.op[name] = symbol;
                console.log('filter:' + JSON.stringify(this.filter));
            },
            clearFilter()  //清空查询条件
            {
                this.search = ''; //快捷搜索--字段
                this.oldsearch = '';
                this.filter = {};//高级搜索--字段
                this.op = {};//高级搜索--条件
                this.sort = 'id';  //排序键名
                this.order = 'desc';  //排序方式
            },
            formatDate(str)   //格式化时间戳
            {
                if(str === null){
                    return '';
                }
                if(typeof str !== 'string'){
                    str = str.toString();
                }
                let between = '';
                let strs= []; //定义一数组
                strs=str.split(","); //字符分割
                for (let i=0;i<strs.length ;i++ )
                {
                    if(strs[i].length > 0){
                        let d = new Date(strs[i]);
                        let resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate());
                        let resTime = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds());
                        between = between+resDate+' '+resTime+',';
                    }
                }
                return between;
            },
            p(s) {
                return s < 10 ? '0' + s : s
            },
            setTabChecked(event){  //选项卡选中
                for (let i = 0; i < this.tabmenuItems.length ; i++){
                    this.tabmenuItems[i].class = '';
                }
                event.item.class = 'p-highlight';
            },
            deepClone (source) {
                if (!source) {
                    console.log('\r\n空数据');
                    return '';
                }
                if (typeof source === 'string') {
                    return source;
                }
                if (typeof source !== 'object') {
                    console.log('\r\n非对象格式');
                    return '';
                }
                var targetObj =  {};//this.testArray(source) ? [] :
                let iii = 0;
                for (var keys in source) {
                    console.log('\r\n'+keys);
                    targetObj[keys] = source[keys];
                    if(iii >= 50 ){
                        break;
                    }
                    iii++;
                }
                return targetObj
            },

            test(d='无'){
                console.log(this.deepClone(d));
                // console.log('TSET:'+JSON.stringify(d));
            },
            onPage(event) {
                this.limit = event.rows;
                this.offset = event.first;
                this.getListsTable();
                //event.page: New page number
                //event.first: Index of first record
                //event.rows: Number of rows to display in new page
                //event.pageCount: Total number of pages
                // console.log('event：' + JSON.stringify(event));
            },
            formatCurrency(value) {
                return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
            },
            openNew() {
                this.list = {};
                this.submitted = false;
                this.listDialog = true;
            },
            hideDialog() {
                this.listDialog = false;
                this.submitted = false;
            },
            savelist() {
                this.submitted = true;

                if (this.list.name.trim()) {
                    if (this.list.id) {
                        this.$set(this.lists, this.findIndexById(this.list.id), this.list);
                        this.$toast.add({severity: 'success', summary: '提示', detail: '更新成功', life: 3000});
                    } else {
                        this.list.id = this.createId();
                        this.list.code = this.createId();
                        this.list.image = 'list-placeholder.svg';
                        this.list.inventoryStatus = 'INSTOCK';
                        this.lists.push(this.list);
                        this.$toast.add({severity: 'success', summary: '提示', detail: '新建成功', life: 3000});
                    }

                    this.listDialog = false;
                    this.list = {};
                }
            },
            editlist(list) {
                this.$router.push(`logs_info?` + this.dataKey + '=' + list.[this.dataKey]);
            },
            confirmDeletelist(list) {
                this.list = list;
                this.deletelistDialog = true;
            },
            confirmInfolist(list) {
                console.log('list:'+JSON.stringify(list));
                this.$toast.add({severity: 'success', summary: '提示', detail: '查看详情', life: 3000});
            },
            deletelist() {
                this.lists = this.lists.filter(val => val.id !== this.list.id);
                this.deletelistDialog = false;
                this.list = {};
                this.$toast.add({severity: 'success', summary: '提示', detail: '删除成功', life: 3000});
            },
            findIndexById(id) {
                let index = -1;
                for (let i = 0; i < this.lists.length; i++) {
                    if (this.lists[i].id === id) {
                        index = i;
                        break;
                    }
                }

                return index;
            },
            createId() {
                let id = '';
                var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                for (var i = 0; i < 5; i++) {
                    id += chars.charAt(Math.floor(Math.random() * chars.length));
                }
                return id;
            },
            exportCSV() {
                this.$refs.dt.exportCSV();
            },
            confirmDeleteSelected() {
                this.deletelistsDialog = true;
            },
            deleteSelectedlists() {
                let ids = [];
                let selectedlists = this.lists.filter(val => this.selectedlists.includes(val));
                for (let key in selectedlists) {
                    if (selectedlists[key].[this.dataKey] !== undefined) {
                        ids.push(selectedlists[key].[this.dataKey]);
                    }
                }
                ids = ids.join(",");

                let params = {
                    [this.dataKey]: ids
                };
                this.TableService.post(this.controlRout + '/del', params).then(data => {
                    if (data === undefined) {
                        return;
                    }
                    if (typeof (data) === 'object' && data.code !== 20000) {
                        return;
                    }
                    this.$toast.add({severity: 'success', summary: '提示', detail: data.msg, life: 3000});
                    //清空表单数据
                    this.deletelistsDialog = false;
                    this.selectedlists = null;
                    //清空搜索条件
                    this.clearFilter();
                    //刷新表格
                    this.getListsTable();
                });
            },
            confirmSwitch(list)   //状态开关
            {
                console.log('list:'+JSON.stringify(list.status));
                let params = {
                    [this.dataKey] : list.[this.dataKey],
                    key : 'status',
                    update: list.status ? 0 : 1,
                };
                this.TableService.get(this.controlRout + '/switch', params).then(data => {
                    if(data.code === 20000){
                        this.$toast.add({severity: 'success', summary: '提示', detail: '切换成功', life: 3000});
                        return;
                    }
                    this.getListsTable();
                });
            },
        },
        watch: {
            screenWidth (val)
            {
                this.scrollable = val > 960;   //适配移动端预览，关闭滚动列表
            },
            search(val)  //搜索框
            {
                if(val.replace(/^\s+|\s+$/g,"") === this.oldsearch.replace(/^\s+|\s+$/g,""))
                {
                    return; //解决输入文字时无效提交
                }
                this.oldsearch = val;
                this.getListsTable({search:true});
            }
        },
    }
</script>

<style scoped lang="scss">
    .table-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .confirmation-content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .list-badge {
        border-radius: 2px;
        padding: .25em .5rem;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: .3px;

        &.status-有现货 {
            background: #C8E6C9;
            color: #256029;
        }

        &.status-缺货 {
            background: #FFCDD2;
            color: #C63737;
        }

        &.status-lowstock {
            background: #FEEDAF;
            color: #8A5340;
        }
    }

    @media screen and (max-width: 960px) {
        /deep/ .p-datatable {
            &.p-datatable-customers {
                .p-datatable-thead > tr > th,
                .p-datatable-tfoot > tr > td {
                    display: none !important;
                }

                .p-datatable-tbody > tr {
                    border-bottom: 1px solid var(--surface-d);

                    > td {
                        text-align: left;
                        display: block;
                        border: 0 none !important;
                        width: 100% !important;
                        float: left;
                        clear: left;
                        border: 0 none;

                        .p-column-title {
                            padding: .4rem;
                            min-width: 30%;
                            display: inline-block;
                            margin: -.4rem 1rem -.4rem -.4rem;
                            font-weight: bold;
                        }

                        .p-progressbar {
                            margin-top: .5rem;
                        }
                    }
                }
            }
        }

        /deep/ .p-toolbar {
            flex-wrap: wrap;

            .p-button {
                margin-bottom: .25rem;
            }
        }
    }

    .tabview-custom {
        i, span {
            vertical-align: middle;
        }

        span {
            margin: 0 .5rem;
        }
    }
    .p-multiselect {
        min-width: 15rem;
    }

    .multiselect-custom {

        .p-multiselect-label:not(.p-placeholder) {
            padding-top: .25rem;
            padding-bottom: .25rem;
        }

        .country-item {
            display: flex;
            align-items: center;

            span.flag {
                width: 18px;
                height: 12px;
                margin-right: .5rem;
                margin-left: .5rem;
            }
        }

        .country-item-value {
            border-radius: 3px;
            display: inline-flex;
            margin-right: .5rem;
            background-color: var(--primary-color);
            color: var(--primary-color-text);
        }
    }

    .special-day {
        text-decoration: line-through;
    }

    /**
    小头像
     */
    .img-center {
        margin: 0 auto;
        display: inline;
        float: none;
    }

    .img-sm-sm, .box-comments .box-comment img, .user-block.user-block-sm img {
        width: 2.8rem !important;
        height: 2.8rem !important;
    }

    /**
    切换开关
     */
    .p-button.p-highlight {
        background: #2196F3;
        border-color: #2196F3;
        color: #ffffff;
    }
    .p-button:not(.p-disabled):not(.p-highlight):hover {
        background: #e9ecef;
        border-color: #ced4da;
        color: #495057;
    }

    /**
    标签卡
     */
    .status-success {
        background: #c8e6c9;
        color: #256029;
    }
    .p-tabview-panels{
        padding: 0;
    }
</style>
